<template>
	<view class="content">
		<view class="bg"></view>
		<view class="box">个人中心</view>
		<view class="box1">丝竹电子阅谱器</view>
		<view class="box2">
			<view>我的乐谱</view>
			<view>
				<text>{{ songsCount }}</text>
				<text>首</text>
			</view>
		</view>

		<view class="box3">
			<view class="box3_item" @click="changeItem(1)">
				<text class="box3_title">我的乐谱</text>
				<uni-icons type="right" size="20" color="#999999"></uni-icons>
			</view>
			<view class="box3_item" @click="changeItem(2)">
				<text class="box3_title">上传乐谱</text>
				<uni-icons type="right" size="20" color="#999999"></uni-icons>
			</view>
			<view class="box3_item" @click="changeItem(3)">
				<text class="box3_title">客服中心</text>
				<uni-icons type="right" size="20" color="#999999"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
import API from '@/utils/api.js';
export default {
	data() {
		return {
			songsCount: 0
		};
	},
	methods: {
		changeItem(val) {
			switch (val) {
				case 1:
					uni.navigateTo({
						url: '/pages/my/mymusicscore'
					});
					break;
				case 2:
					uni.switchTab({
						url: '/pages/creatmusic/creatmusic'
					});
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/my/customer'
					});
					break;
			}
		},

		// 歌曲数据
		getSongList() {
			API.getCountByTableName(1, 'WHERE user=1').then((res) => {
				console.log(res, '查询的音乐数量');
				this.songsCount = res;
			});
		}
	},
	onShow() {
		plus.screen.lockOrientation('portrait-primary');
		this.getSongList();
	}
};
</script>

<style lang="scss" scoped>
/* 针对手机设备的样式 */
@media only screen and (max-width: 600px) {
	.content {
		padding-top: calc(var(--status-bar-height) + 50rpx);
		position: relative;
		overflow: hidden;

		.bg {
			width: calc(100vw + 270rpx);
			height: 282rpx;
			background-color: rgba(23, 183, 109, 0.61);
			filter: blur(180rpx);
			position: absolute;
			top: 0rpx;
			left: -210rpx;
			z-index: 1;
		}

		.box {
			width: 100%;
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
			line-height: 52rpx;
			text-align: center;
			z-index: 1;
			margin-bottom: 90rpx;
		}

		.box1 {
			font-family: YouSheBiaoTiHei;
			font-weight: 400;
			font-size: 44rpx;
			color: #000000;
			line-height: 58rpx;
			text-align: center;
			margin-bottom: 68rpx;
		}
		.box2 {
			width: 67.2%;
			height: 130rpx;
			border-radius: 12rpx;
			background-color: #17b76d;
			box-shadow: 0rpx 0rpx 20rpx rgba(23, 183, 109, 0.5);
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			padding: 0 64rpx 0 42rpx;
			view:nth-child(1) {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 700;
				font-size: 32rpx;
				color: #ffffff;
				line-height: 130rpx;
				text-align: left;
			}

			view:nth-child(2) {
				display: flex;

				text:nth-child(1) {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 900;
					font-size: 72rpx;
					color: #ffffff;
					text-align: center;
					line-height: 130rpx;
					margin-right: 16rpx;
				}
				text:nth-child(2) {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 32rpx;
					color: #ffffff;
					text-align: center;
					line-height: 150rpx;
				}
			}
		}
		.box3 {
			width: 100%;
			padding: 0 20rpx;
			margin-top: 68rpx;

			.box3_item {
				width: 100%;
				height: 92rpx;
				background: #ffffff;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 1rpx solid #c4c4c4;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 22rpx;
				margin-bottom: 16rpx;

				.box3_title {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					text-align: left;
				}
			}
		}
	}
}

/* 针对平板设备的样式 */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
	.content {
		padding-top: calc(var(--status-bar-height) + 50px);
		position: relative;
		overflow: hidden;

		.bg {
			width: calc(100vw + 270px);
			height: 282px;
			background-color: rgba(23, 183, 109, 0.61);
			filter: blur(180px);
			position: absolute;
			top: 0px;
			left: -210px;
			z-index: 1;
		}

		.box {
			width: 100%;
			font-weight: 500;
			font-size: 36px;
			color: #000000;
			line-height: 52px;
			text-align: center;
			z-index: 1;
			margin-bottom: 90px;
		}

		.box1 {
			font-family: YouSheBiaoTiHei;
			font-weight: 400;
			font-size: 44px;
			color: #000000;
			line-height: 58px;
			text-align: center;
			margin-bottom: 68px;
		}
		.box2 {
			width: 67.2%;
			height: 130px;
			border-radius: 12px;
			background-color: #17b76d;
			box-shadow: 0px 0px 20px rgba(23, 183, 109, 0.5);
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			padding: 0 64px 0 42px;
			view:nth-child(1) {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 700;
				font-size: 32px;
				color: #ffffff;
				line-height: 130px;
				text-align: left;
			}

			view:nth-child(2) {
				display: flex;

				text:nth-child(1) {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 900;
					font-size: 72px;
					color: #ffffff;
					text-align: center;
					line-height: 130px;
					margin-right: 16px;
				}
				text:nth-child(2) {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 32px;
					color: #ffffff;
					text-align: center;
					line-height: 150px;
				}
			}
		}
		.box3 {
			width: 100%;
			padding: 0 20px;
			margin-top: 68px;

			.box3_item {
				width: 100%;
				height: 92px;
				background: #ffffff;
				border-radius: 16px 16px 16px 16px;
				border: 1px solid #c4c4c4;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 22px;
				margin-bottom: 16px;

				.box3_title {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 28px;
					color: #333333;
					text-align: left;
				}
			}
		}
	}
}
</style>